<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <link rel="stylesheet" type="text/css" href="css/cglist.css"/>
	    <script type="text/javascript" src="js/jquery.1.9.1.js" ></script>
	    <script type="text/javascript" src="js/rem.js" ></script>
	    <script type="text/javascript" src="js/mescroll.min.js" ></script>
		<link rel="stylesheet" type="text/css" href="css/mescroll.min.css"/>
		<title>供应商</title>
	</head>
	<style>
		.list li{
			border-bottom: 1px solid #f0f0f0;
			margin-top: 0;
		}
		.list li:last-child{
			border-bottom: none;
		}
		.cate_mid{
			display: block;
		}
		.text_box .text{
			width: 97%;
		}
		.text_box .submit{
			right: 0;
		}
	</style>
	<body>
		<div class="top">
			<div class="cate_mid">
			    <form id="searchForm" name="searchForm" method="get" action="" onsubmit="">
			        <div class="text_box" name="list_search_text_box" onclick="">
			            <input id="keyword" name="search" type="text" placeholder="请输入供货商名称或编号" class="text" value="{$search}">
			            <input type="submit" value="" class="submit" id="list_search_submit">
			        </div>
			    </form>
			</div>
		</div>
		<div id="mescroll">
			<ul class="list">
		        <li>
		        		<a href="#">
			            <p>北京康复印刷厂</p>
			            <div class="date">
			                <span class="date_left">联系人：xxx</span>
			                <span class="date_left" style="margin-left: 0.45rem;">电话：13156783456</span>
			            </div>
		            </a>
		       </li>
		       <li>
		        		<a href="#">
			            <p>北京康复印刷厂</p>
			            <div class="date">
			                <span class="date_left">联系人：xxx</span>
			                <span class="date_left" style="margin-left: 0.45rem;">电话：13156783456</span>
			            </div>
		            </a>
		       </li>
		    </ul>
		</div>
		<a href="add_supplier.html"><div class="pay">新增</div></a>
	</body>
<script>
  var param = window.location.search;
  var mescroll = new MeScroll("mescroll", { //第一个参数"mescroll"对应上面布局结构div的id
    //如果下拉刷新是重置列表数据,那么down完全可以不用配置
    down: {
      callback: downCallback //下拉刷新的回调
    },
    up: {
      auto:false,//在初始化完毕之后自动执行下拉刷新的回调  true  false
      htmlNodata: '<p class="upwarp-nodata">没有更多了..</p>',
      page: {
        num: 0,
        size: 10,
        time: null
      },
      callback: upCallback    //上拉加载的回调
    }
  });

  var pageSize = 10;
  function downCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index'+param+'&Pagesize='+pageSize+'&page=1',
      type: 'get',
      data:{},
      success: function (res) {
        mescroll.resetUpScroll();
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }

    })
  }

  function upCallback(page) {
    $.ajax({
      url: 'http://oa.com/agent/manage/index'+param+'&Pagesize='+pageSize+'&page='+page.num,
      type: 'get',
      success: function (res) {
        var list = res.rows.data;
        if(list.length > 0) { //有数据
          $('.list').append(render(list));
        }
        if (res.rows.data && res.rows.data.length == page.size) {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, true);
        } else {
          //联网成功的回调,隐藏下拉刷新的状态（参数：当前页的数据个数, 是否有下一页true/false）;
          mescroll.endSuccess(res.rows.data.length, false);
        }
      },
      error: function () {
        // 联网失败的回调,隐藏下拉刷新的状态
        mescroll.endErr();
      }
    })
  }
  function render(data)
  {
    var html ='';
    $.each(data,function (index,value) {
      console.log(value);
      html +='<li><a href="#"><p>'+value.title
      	+'</p><div class="date"><span class="date_left">联系人：'+value.person
      	+'</span><span class="date_left" style="margin-left: 0.45rem;">'+value.tel+'</span></div></a></li>';
    });
    return html;
  }
</script>
</html>
